<template>
  <div class="home">
    <div class="top">
      <div class="left">
        <span class="lbtn" @click="goHome">首页</span>
      </div>
      <div class="center">
        <div class="title">智慧餐厅可视化大数据平台</div>
      </div>
      <div class="right">
        <span class="rbtn">统计报告</span>
      </div>
    </div>
    <el-row :gutter="20">
      <el-col :span="8">
        <el-card
          style="width: 100%; height: 330px; margin-bottom: 20px; background: url(./images/bg1.png)"
        >
          <div id="line" ref="lineChart"></div>
        </el-card>

        <!-- <el-card class="table" shadow="always" style="margin-bottom: 50px;background: url(./images/bg1.png);">
                    <el-table :data="dateinformation2" style="width: 100%;">

                        <el-table-column prop="name" label="餐厅名称" width="180" />
                        <el-table-column prop="number" label="总订单数" width="180">
                        </el-table-column>
                        <el-table-column prop="money" label="总销售量" />
                    </el-table>
                </el-card> -->

        <div class="bar-pie1">
          <el-card style="width: 100%; height: 370px; background: url(./images/bg1.png)">
            <div id="bar1" ref="barChart1"></div>
          </el-card>
        </div>
      </el-col>

      <el-col :span="16">
        <!-- <el-card style="width: 100%; height: 330px; margin-bottom: 20px;background: url(./images/bg1.png);">
                    <div id="line" ref="lineChart"></div>
                </el-card> -->

        <el-card
          style="width: 100%; height: 330px; margin-bottom: 30px; background: url(./images/bg1.png)"
        >
          <div id="line1" ref="lineChart1"></div>
        </el-card>

        <div class="bar-pie">
          <el-card style="width: 49%; height: 360px; background: url(./images/bg1.png)">
            <div id="bar" ref="barChart"></div>
          </el-card>

          <el-card style="width: 49%; height: 360px; background: url(./images/bg1.png)">
            <div id="pie" ref="pieChart"></div>
          </el-card>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script setup lang="ts">
import * as echarts from 'echarts'
import axios from 'axios'
import { useRouter, useRoute } from 'vue-router'
import { reactive, ref, onMounted } from 'vue'

const router = useRouter()
const route = useRoute()

const reviewmenu = ref([])

const goHome = () => {
  router.push('/layout')
}

type DateInfo = {
  name: string
  month: string
  date: string
  number: string
  person: string
  avgprice: string
  money: string
}
const dateinformation = ref([] as DateInfo[])
const dateinformation1 = ref([] as DateInfo[])
const dateinformation2 = ref({} as DateInfo)
const fetchData = () => {
  //平台日销售
  axios({
    method: 'GET',

    url: 'http://localhost:8080/data/allday',
    headers: {
      'Content-Type': 'application/octet-stream',
      Authorization: window.localStorage.getItem('RestaurantToken')
    }
  }).then((res) => {
    const { data } = res
    dateinformation.value = data.data
    console.log(res)
    drawCharts()
  })
}
const fetchData1 = () => {
  //平台日销售
  axios({
    method: 'GET',

    url: 'http://localhost:8080/data/allmonth',
    headers: {
      'Content-Type': 'application/octet-stream',
      Authorization: window.localStorage.getItem('RestaurantToken')
    }
  }).then((res) => {
    const { data } = res
    dateinformation1.value = data.data
    console.log(res)
    drawCharts()
  })
}
const fetchData2 = () => {
  //平台日销售
  axios({
    method: 'GET',

    url: 'http://localhost:8080/data/allall',
    headers: {
      'Content-Type': 'application/octet-stream',
      Authorization: window.localStorage.getItem('RestaurantToken')
    }
  }).then((res) => {
    const { data } = res
    dateinformation2.value = data.data
    console.log('sadsa' + dateinformation2.value.avgprice)
    drawCharts()
  })
}

onMounted(() => {
  fetchData()
  fetchData1()
  fetchData2()
})

const drawCharts = () => {
  const lineChart = echarts.init(document.getElementById('line'))
  const barChart = echarts.init(document.getElementById('bar'))
  const pieChart = echarts.init(document.getElementById('pie'))
  const lineChart1 = echarts.init(document.getElementById('line1'))
  const barChart1 = echarts.init(document.getElementById('bar1'))

  const dateList = dateinformation.value.map((item) => item.date)
  const dateList1 = dateinformation.value.map((item) => item.money)
  const dateList2 = dateinformation1.value.map((item) => item.person)
  const dateList3 = dateinformation1.value.map((item) => item.number)
  const dateList4 = dateinformation1.value.map((item) => item.month)
  const newData = dateinformation.value.map((item) => [item.date, item.money])

  // 绘制折线图
  lineChart.setOption({
    title: {
      text: '平台月使用人数及订单数', //销售趋势
      left: 'left',
      top: '0px',
      textStyle: {
        //文字颜色
        color: '#ccc',
        //字体风格,'normal','italic','oblique'
        fontStyle: 'normal',
        //字体粗细 'normal','bold','bolder','lighter',100 | 200 | 300 | 400...
        fontWeight: 'bold',
        //字体系列
        fontFamily: 'sans-serif',
        //字体大小
        fontSize: 18
      }
    },
    backgroundColor: '#091C3D',
    tooltip: {
      //提示框组件
      trigger: 'axis'
    },
    toolbox: {
      //工具栏,内置有导出图片，数据视图，动态类型切换，数据区域缩放，重置五个工具。
      feature: {
        //各工具配置项。
        dataView: {
          //数据视图工具，可以展现当前图表所用的数据，编辑后可以动态更新。
          show: true, //是否显示组件。
          readOnly: false,
          optionToContent: function (opt) {
            var axisData = opt.xAxis[0].data
            var series = opt.series
            var table = '<table style="width:100%;text-align:center"><tbody><tr>' + '<td>月份</td>'
            for (var i = 0, l = series.length; i < l; i++) {
              table += '<td>' + series[i].name + '</td>'
            }

            for (var i = 0, l = axisData.length; i < l; i++) {
              table += '<tr>' + '<td>' + axisData[i] + '</td>'

              // 内部循环：根据 series 动态生成数据列
              for (var j = 0, len = series.length; j < len; j++) {
                table += '<td>' + series[j].data[i] + '</td>'
              }

              table += '</tr>'
            }

            table += '</tbody></table>'
            return table
          }
        },
        magicType: {
          //动态类型切换 示例：feature: { magicType: {type: ['line', 'bar', 'stack', 'tiled']}}
          show: true,
          type: ['line', 'bar', 'stack', 'tiled']
        },
        restore: {
          //配置项还原。
          show: true
        },
        saveAsImage: {
          //保存为图片。
          show: true
        }
      }
    },
    grid: {
      left: '5%', // 调整左边距
      right: '5%', // 调整右边距
      bottom: '10%', // 调整底边距
      top: '20%', // 调整顶边距

      //	padding:'0 0 10 0',
      containLabel: true
    },
    legend: {
      //图例组件，颜色和名字
      right: '10%',
      top: '30%',
      itemGap: 16,
      itemWidth: 18,
      itemHeight: 10,
      data: [
        {
          name: '使用人数'
          //icon:'image://../wwwroot/js/url2.png', //路径
        },
        {
          name: '订单数'
        }
      ],
      textStyle: {
        color: '#a8aab0',
        fontStyle: 'normal',
        fontFamily: '微软雅黑',
        fontSize: 12
      }
    },
    xAxis: [
      {
        type: 'category',
        //	boundaryGap: true,//坐标轴两边留白
        data: dateList4,
        axisLabel: {
          //坐标轴刻度标签的相关设置。
          //		interval: 0,//设置为 1，表示『隔一个标签显示一个标签』
          //	margin:15,
          textStyle: {
            color: '#078ceb',
            fontStyle: 'normal',
            fontFamily: '微软雅黑',
            fontSize: 12
          },
          rotate: 50
        },
        axisTick: {
          //坐标轴刻度相关设置。
          show: false
        },
        axisLine: {
          //坐标轴轴线相关设置
          lineStyle: {
            color: '#fff',
            opacity: 0.2
          }
        },
        splitLine: {
          //坐标轴在 grid 区域中的分隔线。
          show: false
        }
      }
    ],
    yAxis: [
      {
        type: 'value',
        splitNumber: 5,
        axisLabel: {
          textStyle: {
            color: '#a8aab0',
            fontStyle: 'normal',
            fontFamily: '微软雅黑',
            fontSize: 12
          }
        },
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: ['#fff'],
            opacity: 0.06
          }
        }
      }
    ],
    series: [
      {
        name: '使用人数',
        type: 'bar',
        data: dateList2,
        barWidth: 10,
        barGap: 2, //柱间距离
        label: {
          //图形上的文本标签
          normal: {
            show: true,
            position: 'top',
            textStyle: {
              color: '#a8aab0',
              fontStyle: 'normal',
              fontFamily: '微软雅黑',
              fontSize: 12
            }
          }
        },
        itemStyle: {
          normal: {
            show: true,
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: '#5768EF'
              },
              {
                offset: 1,
                color: '#5768EF'
              }
            ]),
            barBorderRadius: 50,
            borderWidth: 0
          }
        }
      },
      {
        name: '订单数',
        type: 'bar',
        data: dateList3,
        barWidth: 10,
        barGap: 2, //柱间距离
        label: {
          //图形上的文本标签
          normal: {
            show: true,
            position: 'top',
            textStyle: {
              color: '#a8aab0',
              fontStyle: 'normal',
              fontFamily: '微软雅黑',
              fontSize: 12
            }
          }
        },
        itemStyle: {
          normal: {
            show: true,
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: '#69CBF2'
              },
              {
                offset: 1,
                color: '#69CBF2'
              }
            ]),
            barBorderRadius: 50,
            borderWidth: 0
          }
        }
      }
    ]
  })

  var data = [
    {
      coords: newData
    }
  ]
  //数据
  var XName = dateList
  var data1 = dateList1
  var img = [
    'image://',
    'image://',
    'image://',
    'image://'
  ]

  // 绘制折线图
  lineChart1.setOption({
    title: {
      text: '平台销售趋势', //销售趋势
      left: 'center',
      top: '0px',
      textStyle: {
        //文字颜色
        color: '#ccc',
        //字体风格,'normal','italic','oblique'
        fontStyle: 'normal',
        //字体粗细 'normal','bold','bolder','lighter',100 | 200 | 300 | 400...
        fontWeight: 'bold',
        //字体系列
        fontFamily: 'sans-serif',
        //字体大小
        fontSize: 18
      }
    },
    backgroundColor: '#0e2147',
    grid: {
      left: '5%',
      top: '15%',
      bottom: '15%',
      right: '5%'
    },
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      type: 'scroll',
      data: '来电量',
      itemWidth: 18,
      itemHeight: 12,
      textStyle: {
        color: '#00ffff',
        fontSize: 14
      }
    },
    toolbox: {
      //工具栏,内置有导出图片，数据视图，动态类型切换，数据区域缩放，重置五个工具。
      feature: {
        //各工具配置项。
        dataView: {
          //数据视图工具，可以展现当前图表所用的数据，编辑后可以动态更新。
          show: true, //是否显示组件。
          readOnly: false,
          optionToContent: function (opt) {
            var axisData = opt.xAxis[0].data
            var series = opt.series
            var table = '<table style="width:100%;text-align:center"><tbody><tr>' + '<td>日期</td>'
            for (var i = 0, l = 1; i < l; i++) {
              table += '<td>' + series[i].name + '</td>'
            }

            for (var i = 0, l1 = axisData.length; i < l1; i++) {
              table += '<tr>' + '<td>' + axisData[i] + '</td>'

              table += '<td>' + series[0].data[i] + '</td>'

              table += '</tr>'
            }

            table += '</tbody></table>'
            return table
          }
        },
        magicType: {
          //动态类型切换 示例：feature: { magicType: {type: ['line', 'bar', 'stack', 'tiled']}}
          show: true,
          type: ['line', 'bar', 'stack', 'tiled']
        },
        restore: {
          //配置项还原。
          show: true
        },
        saveAsImage: {
          //保存为图片。
          show: true
        }
      }
    },
    yAxis: [
      {
        type: 'value',
        position: 'left',
        nameTextStyle: {
          color: '#00FFFF'
        },
        splitLine: {
          lineStyle: {
            type: 'dashed',
            color: 'rgba(135,140,147,0.8)'
          }
        },
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          formatter: '{value}',
          color: '#fff',
          fontSize: 14
        }
      }
    ],
    xAxis: [
      {
        type: 'category',
        axisTick: {
          show: false
        },
        axisLine: {
          show: false,
          lineStyle: {
            color: '#0696f9'
          }
        },
        axisLabel: {
          inside: false,
          textStyle: {
            color: '#fff', // x轴颜色
            fontWeight: 'normal',
            fontSize: '14',
            lineHeight: 22
          }
        },
        data: XName
      }
    ],
    series: [
      {
        symbolSize: 150,
        symbol: img[2],
        name: '销售额',
        type: 'line',
        data: data1,
        itemStyle: {
          normal: {
            borderWidth: 5,
            color: '#0696f9'
          }
        }
      },
      {
        name: '滑行的光点',
        type: 'lines',
        coordinateSystem: 'cartesian2d',
        symbolSize: 30,
        polyline: true,
        effect: {
          show: true,
          trailLength: 0,
          symbol: 'arrow',
          period: 10, //光点滑动速度
          symbolSize: 150,
          symbol: img[0]
        },
        lineStyle: {
          normal: {
            width: 1,
            opacity: 0.6,
            curveness: 0.2
          }
        },
        data: data
      }
    ]
  })

  var dataStyle = {
    normal: {
      label: {
        show: false
      },
      labelLine: {
        show: false
      },
      shadowBlur: 0,
      shadowColor: '#203665'
    }
  }
  var dataArr = [
    {
      value: dateinformation2.value.avgprice,
      name: '人均消费'
    }
  ]
  var color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
    {
      offset: 0,
      color: '#5CF9FE' // 0% 处的颜色
    },
    {
      offset: 0.17,
      color: '#468EFD' // 100% 处的颜色
    },
    {
      offset: 0.9,
      color: '#468EFD' // 100% 处的颜色
    },
    {
      offset: 1,
      color: '#5CF9FE' // 100% 处的颜色
    }
  ])
  var colorSet = [
    [0.91, color],
    [1, '#15337C']
  ]
  var rich = {
    white: {
      fontSize: 40,
      color: '#fff',
      fontWeight: '500',
      padding: [0, 0, 0, 0]
    },
    bule: {
      fontSize: 40,
      fontFamily: 'DINBold',
      color: '#fff',
      fontWeight: '700',
      padding: [0, 0, 0, 20]
    },
    radius: {
      width: 350,
      height: 80,
      // lineHeight:80,
      borderWidth: 1,
      borderColor: '#0092F2',
      fontSize: 50,
      color: '#fff',
      backgroundColor: '#1B215B',
      borderRadius: 20,
      textAlign: 'center'
    },
    size: {
      height: 400,
      padding: [100, 0, 0, 0]
    }
  }
  barChart.setOption({
    backgroundColor: '#0E1327',
    tooltip: {
      formatter: '{a} <br/>{b} : {c}%'
    },
    toolbox: {
      //工具栏,内置有导出图片，数据视图，动态类型切换，数据区域缩放，重置五个工具。
      feature: {
        //各工具配置项。

        restore: {
          //配置项还原。
          show: true
        },
        saveAsImage: {
          //保存为图片。
          show: true
        }
      }
    },
    series: [
      {
        //内圆
        type: 'pie',
        radius: '85%',
        center: ['50%', '50%'],
        z: 0,
        itemStyle: {
          normal: {
            color: new echarts.graphic.RadialGradient(
              0.5,
              0.5,
              1,
              [
                {
                  offset: 0,
                  color: 'rgba(17,24,43,0)'
                },
                {
                  offset: 0.5,
                  // color: '#1E2B57'
                  color: 'rgba(28,42,91,.6)'
                },
                {
                  offset: 1,
                  color: '#141C33'
                  // color:'rgba(17,24,43,0)'
                }
              ],
              false
            ),
            label: {
              show: false
            },
            labelLine: {
              show: false
            }
          }
        },
        hoverAnimation: false,
        label: {
          show: false
        },
        tooltip: {
          show: false
        },
        data: [100]
      },
      {
        type: 'gauge',
        name: '外层辅助',
        radius: '74%',
        startAngle: '225',
        endAngle: '-45',
        min: 0,
        max: 100,
        splitNumber: 4,
        // splitNumber: '100',
        pointer: {
          show: false
        },
        detail: {
          show: false
        },
        data: [
          {
            value: 1
          }
        ],
        // data: [{value: 1, name: 90}],
        title: {
          show: true,
          offsetCenter: [0, 30],
          textStyle: {
            color: '#fff',
            fontStyle: 'normal',
            fontWeight: 'normal',
            fontFamily: '微软雅黑',
            fontSize: 20
          }
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: [[1, '#00FFFF']],
            width: 2,
            opacity: 1
          }
        },
        axisTick: {
          show: false
        },
        splitLine: {
          show: true,
          length: -44,
          lineStyle: {
            color: '#051932',
            width: 0,
            type: 'solid'
          }
        },
        axisLabel: {
          show: true,
          formatter: function (value) {
            return value + '%'
          },
          fontSize: 20
        }
      },
      {
        type: 'gauge',
        radius: '70%',
        startAngle: '225',
        endAngle: '-45',
        pointer: {
          show: false
        },
        detail: {
          formatter: function (value) {
            var num = Math.round(value)
            return '{bule|' + num + '}{white|元}' + '{size|' + '}'
          },
          rich: rich,
          offsetCenter: ['0%', '0%']
        },
        data: dataArr,
        title: {
          show: true,
          color: '#fff',
          fontStyle: 'normal',
          fontWeight: 'normal',
          fontFamily: '微软雅黑',
          fontSize: 20
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: colorSet,
            width: 25,
            // shadowBlur: 15,
            // shadowColor: '#B0C4DE',
            shadowOffsetX: 0,
            shadowOffsetY: 0,
            opacity: 1
          }
        },
        axisTick: {
          show: false
        },
        splitLine: {
          show: false,
          length: 25,
          lineStyle: {
            color: '#00377a',
            width: 2,
            type: 'solid'
          }
        },
        axisLabel: {
          show: false
        }
      },
      {
        name: '灰色内圈', //刻度背景
        type: 'gauge',
        z: 2,
        radius: '60%',
        startAngle: '225',
        endAngle: '-45',
        //center: ["50%", "75%"], //整体的位置设置
        axisLine: {
          // 坐标轴线
          lineStyle: {
            // 属性lineStyle控制线条样式
            color: [[1, '#018DFF']],
            width: 2,
            opacity: 1 //刻度背景宽度
          }
        },
        splitLine: {
          show: false
        },
        // data: [{
        //     show: false,
        //     value: '80'
        // }], //作用不清楚
        axisLabel: {
          show: false
        },
        pointer: {
          show: false
        },
        axisTick: {
          show: false
        },
        detail: {
          show: 0
        }
      },
      {
        name: '白色圈刻度',
        type: 'gauge',
        radius: '60%',
        startAngle: 225, //刻度起始
        endAngle: -45, //刻度结束
        z: 4,
        axisTick: {
          show: false
        },
        splitLine: {
          length: 16, //刻度节点线长度
          lineStyle: {
            width: 2,
            color: 'rgba(1,244,255, 0.9)'
          } //刻度节点线
        },
        axisLabel: {
          color: 'rgba(255,255,255,0)',
          fontSize: 66
        }, //刻度节点文字颜色
        pointer: {
          show: false
        },
        axisLine: {
          lineStyle: {
            opacity: 0
          }
        },
        detail: {
          show: false
        },
        data: [
          {
            value: 0,
            name: ''
          }
        ]
      },
      {
        //内圆
        type: 'pie',
        radius: '56%',
        center: ['50%', '50%'],
        z: 1,
        itemStyle: {
          normal: {
            color: new echarts.graphic.RadialGradient(
              0.5,
              0.5,
              0.8,
              [
                {
                  offset: 0,
                  color: '#4978EC'
                },
                {
                  offset: 0.5,
                  color: '#1E2B57'
                },
                {
                  offset: 1,
                  color: '#141F3D'
                }
              ],
              false
            ),
            label: {
              show: false
            },
            labelLine: {
              show: false
            }
          }
        },
        hoverAnimation: false,
        label: {
          show: false
        },
        tooltip: {
          show: false
        },
        data: [100]
      }
    ]
  })

  // 绘制柱状图
  barChart1.setOption({
    title: {
      text: '平台数据汇总', //销售趋势
      left: 'center',
      top: '10px',
      textStyle: {
        //文字颜色
        color: '#ccc',
        //字体风格,'normal','italic','oblique'
        fontStyle: 'normal',
        //字体粗细 'normal','bold','bolder','lighter',100 | 200 | 300 | 400...
        fontWeight: 'bold',
        //字体系列
        fontFamily: 'sans-serif',
        //字体大小
        fontSize: 18
      }
    },
    toolbox: {
      //工具栏,内置有导出图片，数据视图，动态类型切换，数据区域缩放，重置五个工具。
      feature: {
        //各工具配置项。

        restore: {
          //配置项还原。
          show: true
        },
        saveAsImage: {
          //保存为图片。
          show: true
        }
      }
    },
    backgroundColor: '#20263f',
    series: [
      {
        name: '第一个圆环',
        type: 'pie',
        clockWise: false,
        radius: [60, 70],
        itemStyle: dataStyle,
        hoverAnimation: false,
        center: ['15%', '50%'],
        data: [
          {
            value: dateinformation2.value.number,
            label: {
              normal: {
                rich: {
                  a: {
                    color: '#3a7ad5',
                    align: 'center',
                    fontSize: 20,
                    fontWeight: 'bold'
                  },
                  b: {
                    color: '#fff',
                    align: 'center',
                    fontSize: 16
                  }
                },
                formatter: function (params) {
                  return '{b|总订单数}\n\n' + '{a|' + params.value + '个}'
                },
                position: 'center',
                show: true,
                textStyle: {
                  fontSize: '14',
                  fontWeight: 'normal',
                  color: '#fff'
                }
              }
            },
            itemStyle: {
              normal: {
                color: '#2c6cc4',
                shadowColor: '#2c6cc4',
                shadowBlur: 0
              }
            }
          },
          {
            value: 75,
            name: 'invisible',
            itemStyle: {
              normal: {
                color: '#24375c'
              },
              emphasis: {
                color: '#24375c'
              }
            }
          }
        ]
      },
      {
        name: '第二个圆环',
        type: 'pie',
        clockWise: false,
        radius: [60, 70],
        itemStyle: dataStyle,
        hoverAnimation: false,
        center: ['50%', '50%'],
        data: [
          {
            value: dateinformation2.value.person,
            label: {
              normal: {
                rich: {
                  a: {
                    color: '#d03e93',
                    align: 'center',
                    fontSize: 20,
                    fontWeight: 'bold'
                  },
                  b: {
                    color: '#fff',
                    align: 'center',
                    fontSize: 16
                  }
                },
                formatter: function (params) {
                  return '{b|总使用人数}\n\n' + '{a|' + params.value + '人}'
                },
                position: 'center',
                show: true,
                textStyle: {
                  fontSize: '14',
                  fontWeight: 'normal',
                  color: '#fff'
                }
              }
            },
            itemStyle: {
              normal: {
                color: '#ef45ac',
                shadowColor: '#ef45ac',
                shadowBlur: 0
              }
            }
          },
          {
            value: 50,
            name: 'invisible',
            itemStyle: {
              normal: {
                color: '#412a4e'
              },
              emphasis: {
                color: '#412a4e'
              }
            }
          }
        ]
      },
      {
        name: '第三个圆环',
        type: 'pie',
        clockWise: false,
        radius: [60, 70],
        itemStyle: dataStyle,
        hoverAnimation: false,
        center: ['85%', '50%'],
        data: [
          {
            value: dateinformation2.value.money,
            label: {
              normal: {
                rich: {
                  a: {
                    color: '#603dd0',
                    align: 'center',
                    fontSize: 20,
                    fontWeight: 'bold'
                  },
                  b: {
                    color: '#fff',
                    align: 'center',
                    fontSize: 16
                  }
                },
                formatter: function (params) {
                  return '{b|总金额}\n\n' + '{a|' + params.value + '元}'
                },
                position: 'center',
                show: true,
                textStyle: {
                  fontSize: '14',
                  fontWeight: 'normal',
                  color: '#fff'
                }
              }
            },
            itemStyle: {
              normal: {
                color: '#613fd1',
                shadowColor: '#613fd1',
                shadowBlur: 0
              }
            }
          },
          {
            value: 25,
            name: 'invisible',
            itemStyle: {
              normal: {
                color: '#453284'
              },
              emphasis: {
                color: '#453284'
              }
            }
          }
        ]
      }
    ]
  })

  var xdata = dateinformation1.value.map((item) => item.month)
  var data = dateinformation1.value.map((item) => item.money)
  var maxArr = [10000, 10000]

  // 绘制饼图
  pieChart.setOption({
    title: {
      text: '平台月销售额', //销售趋势
      left: 'center',
      top: '0px',
      textStyle: {
        //文字颜色
        color: '#ccc',
        //字体风格,'normal','italic','oblique'
        fontStyle: 'normal',
        //字体粗细 'normal','bold','bolder','lighter',100 | 200 | 300 | 400...
        fontWeight: 'bold',
        //字体系列
        fontFamily: 'sans-serif',
        //字体大小
        fontSize: 18
      }
    },
    toolbox: {
      //工具栏,内置有导出图片，数据视图，动态类型切换，数据区域缩放，重置五个工具。
      feature: {
        //各工具配置项。
        dataView: {
          //数据视图工具，可以展现当前图表所用的数据，编辑后可以动态更新。
          show: true, //是否显示组件。
          readOnly: false,
          optionToContent: function (opt) {
            var axisData = opt.xAxis[0].data
            var series = opt.series
            var table = '<table style="width:100%;text-align:center"><tbody><tr>' + '<td>月份</td>'
            for (var i = 0, l = series.length; i < l; i++) {
              table += '<td>' + series[i].name + '</td>'
            }

            for (var i = 0, l = axisData.length; i < l; i++) {
              table += '<tr>' + '<td>' + axisData[i] + '</td>'

              // 内部循环：根据 series 动态生成数据列
              for (var j = 0, len = series.length; j < len; j++) {
                table += '<td>' + series[j].data[i] + '</td>'
              }

              table += '</tr>'
            }

            table += '</tbody></table>'
            return table
          }
        },
        magicType: {
          //动态类型切换 示例：feature: { magicType: {type: ['line', 'bar', 'stack', 'tiled']}}
          show: true,
          type: ['line', 'bar', 'stack', 'tiled']
        },
        restore: {
          //配置项还原。
          show: true
        },
        saveAsImage: {
          //保存为图片。
          show: true
        }
      }
    },
    backgroundColor: 'rgba(5,39,58,1)', //背景色
    tooltip: {
      trigger: 'axis',
      borderRadius: 5,
      borderColor: '#6baab2',
      borderWidth: 1,
      formatter: function (params) {
        // return (
        //   params[0].data.nameCode +
        //   "<br>" +
        //   "杆塔数量(基数) :" +
        //   params[0].value
        // );
      }
    },
    grid: {
      left: '3%',
      right: '3%',
      bottom: '0%',
      top: '15%',
      containLabel: true
    },
    xAxis: {
      data: xdata,
      triggerEvent: true,
      axisTick: {
        show: false
      },
      axisLine: {
        show: false
      },
      axisLabel: {
        show: true,
        rotate: 45,
        interval: 0,
        textStyle: {
          color: 'rgb(95,109,119)'
        }
      }
    },
    yAxis: {
      name: '单位：元',
      triggerEvent: true,
      nameTextStyle: {
        color: 'rgb(95,109,119)',
        fontSize: 18
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: 'rgba(255,255,255,.1)'
        }
      },
      axisTick: {
        show: false
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: 'rgba(255,255,255,.1)'
        }
      },
      axisLabel: {
        show: true,
        textStyle: {
          color: 'rgb(148,159,167)',
          fontSize: 16
        }
      }
    },
    // color: ["#e54035"],
    series: [
      {
        name: '销售额',
        barMinHeight: 10,
        type: 'pictorialBar',
        barCategoryGap: '60%',
        // symbol: 'path://M0,10 L10,10 L5,0 L0,10 z',
        symbol: 'path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z',
        itemStyle: {
          normal: {
            //barBorderRadius: 5,
            //渐变色
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: '#01EAED'
              },
              {
                offset: 0.5,
                color: '#02C4DD'
              },
              {
                offset: 1,
                color: '#029ED9'
              }
            ])
          }
        },
        label: {
          normal: {
            show: true,
            position: 'top',
            textStyle: {
              color: '#fff',
              fontSize: 20
            }
          }
        },
        data: data,
        z: 10
      }
    ]
  })

  // 监听窗口大小变化，自适应图表
  window.addEventListener('resize', () => {
    lineChart.resize()
    barChart.resize()
    pieChart.resize()
    lineChart1.resize()
    barChart1.resize()
  })
}
</script>
<style scoped>
.home {
  width: 100%;
  height: 888px;
  background: url(./images/bg1.png) no-repeat;
  background-size: cover;

  .user-info {
    display: flex;
    align-items: center;

    .user-img {
      width: 150px;
      height: 150px;
      border-radius: 100%;
      margin-right: 40px;
    }

    & li:nth-child(1) {
      font-size: 30px;
    }

    & li:nth-child(2) {
      margin-top: 10px;
      font-size: 16px;
      color: rgb(153, 153, 153);
    }
  }

  .login-info {
    font-size: 14px;
    color: rgb(153, 153, 153);

    li {
      margin: 5px;

      span {
        margin-left: 50px;
      }
    }
  }

  .table {
    margin-top: 30px;
  }

  .num {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    .el-card {
      width: 32%;
      height: 90px;
      margin-bottom: 20px;
      border: none;

      i {
        width: 90px;
        height: 100%;
        line-height: 90px;
        text-align: center;
        font-size: 30px;
        color: #fff;
      }

      ul {
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin-left: 20px;

        li:nth-child(1) {
          font-size: 30px;
          color: #000;
          margin-bottom: 5px;
        }

        li:nth-child(2) {
          font-size: 15px;
          color: rgb(148, 148, 148);
        }
      }
    }
  }

  #line {
    width: 100%;
    height: 280px;
  }

  #line1 {
    width: 100%;
    height: 280px;
  }

  .bar-pie {
    width: 100%;
    display: flex;
    justify-content: space-between;

    #pie {
      width: 100%;
      height: 300px;
    }

    #bar {
      width: 100%;
      height: 300px;
    }
  }

  .bar-pie1 {
    width: 100%;
    display: flex;
    justify-content: space-between;

    #bar1 {
      width: 100%;
      height: 330px;
    }
  }
}

.top {
  width: 100%;
  height: 40px;
  display: flex;
  margin-bottom: 5%;

  .left {
    flex: 1.5;
    background: url(./images/dataScreen-header-left-bg.png) no-repeat;
    background-size: cover;

    .lbtn {
      width: 150px;
      height: 40px;
      float: right;
      background: url(./images/dataScreen-header-btn-bg-l.png) no-repeat;
      background-size: 100% 100%;
      text-align: center;
      line-height: 40px;
      color: #29fcff;
      font-size: 20px;
    }
  }

  .center {
    flex: 2;

    .title {
      width: 100%;
      height: 74px;
      background: url(./images/dataScreen-header-center-bg.png) no-repeat;
      background-size: 100% 100%;
      text-align: center;
      line-height: 74px;
      color: #29fcff;
      font-size: 30px;
    }
  }

  .right {
    flex: 1.5;
    background: url(./images/dataScreen-header-left-bg.png) no-repeat;
    background-size: cover;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .rbtn {
      width: 150px;
      height: 40px;
      background: url(./images/dataScreen-header-btn-bg-r.png) no-repeat;
      background-size: 100% 100%;
      text-align: center;
      line-height: 40px;
      color: #29fcff;
    }

    .time {
      color: #29fcff;
      font-size: 20px;
    }
  }
}
</style>
